<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 工具栏 -->
      <page-tools :show-before="true">
        <!-- 前面内容 -->
        <template v-slot:before>{{ tipsInfo }}</template>
        <template v-slot:after>
          <el-button size="mini" type="danger">设置</el-button>
          <el-button size="mini" type="primary">{{ yearMonth }}报表</el-button>
        </template>
      </page-tools>
      <!-- 条件筛选 -->
      <el-card class="hr-block">
        <el-form label-width="120px">
          <el-form-item label="聘用形式:">
            <el-checkbox-group v-model="formData.approvalsTypeChecks">
              <el-checkbox
                v-for="item in approvalsType"
                :key="item.id"
                :label="item.id"
                @change="changeParams"
                >{{ item.value }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="员工状态:">
            <el-checkbox-group v-model="formData.approvalsStateChecks">
              <el-checkbox
                v-for="item in approvalsState"
                :key="item.id"
                :label="item.id"
                @change="changeParams"
                >{{ item.value }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="部门:">
            <el-checkbox-group v-model="formData.departmentChecks">
              <el-checkbox
                v-for="item in departments"
                :key="item.id"
                :label="item.id"
                @change="changeParams"
                >{{ item.name }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="hr-block">
        <el-table :data="list" style="width: 100%">
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="username" label="姓名" width="100" />
          <el-table-column prop="mobile" label="手机" width="130" />
          <el-table-column prop="workNumber" label="工号" width="100" />
          <el-table-column
            prop="formOfEmployment"
            :formatter="formatEmployment"
            width="100"
            label="聘用形式"
          />
          <el-table-column prop="departmentName" label="部门" width="100" />
          <el-table-column prop="timeOfEntry" width="130" label="入职时间">
            <template v-slot:default="obj">
              {{ obj.row.timeOfEntry | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="工资基数" width="100">
            <template slot-scope="scope">
              {{ scope.row.currentBasicSalary + scope.row.currentPostWage }}
            </template>
          </el-table-column>
          <el-table-column label="津贴方案" width="100"
            >通用方案</el-table-column
          >
          <el-table-column label="操作" width="260">
            <template slot-scope="scope" style>
              <el-button
                v-if="
                  scope.row.currentBasicSalary + scope.row.currentPostWage > 0
                "
                size="mini"
                type="primary"
                >调薪</el-button
              >
              <el-button v-else size="mini" type="danger">定薪</el-button>
              <el-button type="text" size="mini">
                <span>查看</span>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row
          type="flex"
          justify="center"
          style="height: 50px"
          align="middle"
        >
          <el-pagination
            background
            layout="prev,pager,next"
            :total="page.total"
            :current-page="page.page"
            :page-size="page.pageSize"
            @current-change="changePage"
          />
        </el-row>
      </el-card>
      <!--查看弹框-->
      <el-dialog
        :title="topLabel"
        :visible.sync="centerDialogVisible"
        width="50%"
        left
      >
        <component
          :is="currentComponent"
          :user-salary="selectedSalaryInfo"
          :user-id="selectUserId"
          @success="getSalarysList"
          @onDialogCancel="centerDialogVisible = false"
        />
        <!-- <ChangeSalary v-if="seeState == 'changeSalary'" :user-salary="selectedSalaryInfo" :user-id="selectUserId" @onDialogCancel="centerDialogVisible=false" /> -->
        <!-- <FixedSalary v-if="seeState == 'fixedSalary'" /> -->
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import {
  getSalarysList,
  getTips,
  getSalaryDetail,
  getCompanySetting
} from '@/api/salarys'
import EmployeeData from '@/model/others/employees'
import { getDepartmentAPI } from '@/api/departments'

@Component({ name: 'UsersTableIndex' })
export default class extends Vue {
  seeState = ''
  centerDialogVisible = false
  topLabel = '转正'
  approvalsType = EmployeeData.hireType
  approvalsState = EmployeeData.workingState
  department = []
  subsidyScheme = []
  list = []
  departments = []
  loading = false
  page = {
    total: 0,
    page: 1,
    pageSize: 10
  }

  tips = {}
  yearMonth = ''
  formData = {
    approvalsTypeChecks: [],
    approvalsStateChecks: [],
    departmentChecks: []
  }

  selectedSalaryInfo = {}
  selectUserId = null
  currentComponent = ''

  get tipsInfo() {
    // return `本月${this.tips.dateRange}：入职 ${this.tips.worksCount} 离职 ${this.tips.leavesCount} 调薪 ${this.tips.adjustCount} 未定薪 ${this.tips.unGradingCount}`
    return '本月0：入职 0 离职 0 调薪 0 未定薪 0'
  }

  created() {
    this.getSalarysList() // 获取工资
    this.getDepartments() // 获取组织
  }

  // 对聘用形式进行文本显示
  formatEmployment(row: any) {
    const data = this.approvalsType.find(
      (item: any) => item.id === row.formOfEmployment.toString()
    )
    return data ? data.value : '未知'
  }

  async getSalarysList() {
    const data = await getCompanySetting()
    this.yearMonth = data.dataMonth
    this.loading = true
    const { rows, total } = await getSalarysList({
      ...this.page,
      ...this.formData
    })
    this.list = rows
    this.page.total = total
    this.loading = false
  }

  // 获取组织列表
  async getDepartments() {
    const { depts } = await getDepartmentAPI()
    this.departments = depts
  }

  async getTips() {
    const { tipsRes } = await getTips()
    this.tips = tipsRes
  }

  changePage(newPage: any) {
    this.page.page = newPage
    this.getSalarysList()
  }

  async changeSalary(key: any, userId: any) {
    this.topLabel = '调薪'
    this.currentComponent = key
    this.centerDialogVisible = true
    this.selectUserId = userId
    this.selectedSalaryInfo = await getSalaryDetail(userId)
  }

  fixedSalary(key: any) {
    this.topLabel = '定薪'
    this.currentComponent = key
    this.centerDialogVisible = true
  }

  // 查询参数发生变化
  changeParams() {
    this.page.page = 1 // 重置第一页
    this.getSalarysList() // 重新拉取工资数据
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
